import React, { useEffect, useState } from 'react'
import { Action, SearchForm, TableCard } from "components";
import { Table, Select, Input, Button, message, Tag, Popconfirm, DatePicker } from 'antd';
import { getCommand, GetControllers } from "./service";
const Authorization = () => {

  const [ControllersList, setControllersList] = useState([])
  useEffect(() => {
    Getdata();

    GetControllers().then(({ data }) => {
      let arr = []
      if(!data.list.length) return
      data.list.forEach(element => {
        arr.push({
          value: element.controller_id,
          label: element.controller_name
        })
      });

      setControllersList(arr)
    })
  }, []);

  const list = [
    {
      label: "入场授权",
      value: "1"
    },
    {
      label: "离场授权",
      value: "2"
    },
    {
      label: "远程开锁",
      value: "3"
    },
    {
      label: "电机控制",
      value: "4"
    },
    {
      label: "广播开锁",
      value: "5"
    },
    {
      label: "状态变更",
      value: "6"
    },
  ]

  const [dataSource, setDataSource] = useState([]);

  const [isFetching, setIsFetching] = useState(false);

  const [Total, setTotal] = useState(0);

  const [SearchParams, setSearchParams] = useState({
    current: 1,
    pageSize: 10,
    controllerNumber: "",
    command: "",

  });

  const Getdata = () => {
    setIsFetching(true);
    getCommand(SearchParams).then(({ data }) => {
      console.log(data)
      if(data == null) return  setIsFetching(false);
      setDataSource(data.list)
      setTotal(data.total)
      setIsFetching(false);
    });
  };

  return (
    <div>
      <SearchForm>
        <SearchForm.Item span={8} title="柜号">
          <Input allowClear placeholder="请输入" onChange={(e) => {
            console.log(e.target.value)
            Getdata({ ...SearchParams, locker_number: e.target.value })
            setSearchParams({ ...SearchParams, locker_number: e.target.value })
          }} />
        </SearchForm.Item>
        <SearchForm.Item span={8} title="命令类型">
          <Select allowClear placeholder="请选择"

            options={list}
            onChange={(value) => {
              console.log(value)
              Getdata({ ...SearchParams, command: value })
              setSearchParams({ ...SearchParams, command: value })
              console.log(value)
            }}></Select>
        </SearchForm.Item>
        <SearchForm.Item span={8} title="控制器名称">
          <Select allowClear placeholder="请选择"

            options={ControllersList}
            onChange={(value) => {
              console.log(value)
              Getdata({ ...SearchParams, controllerNumber: value })
              setSearchParams({ ...SearchParams, controllerNumber: value })
              console.log(value)
            }}></Select>
        </SearchForm.Item>


        <SearchForm.Item span={8} title="开始时间">
          <DatePicker
            placeholder="请选择"
            showTime
            format={"YYYY-MM-DD HH:mm:ss"}
            onChange={(value, dateString) => {
              console.log(dateString)

              Getdata({ ...SearchParams, start_time: dateString })
              setSearchParams({ ...SearchParams, start_time: dateString })
            }}
          />

        </SearchForm.Item>

        <SearchForm.Item span={8} title="结束时间">
          <DatePicker
            placeholder="请选择"
            showTime
            format={"YYYY-MM-DD HH:mm:ss"}
            onChange={(value, dateString) => {
              console.log(value)
              Getdata({ ...SearchParams, end_time: dateString })
              setSearchParams({ ...SearchParams, end_time: dateString })
            }}
          />
        </SearchForm.Item>
      </SearchForm>
      <TableCard
        loading={isFetching}
        rowKey="id"
        dataSource={dataSource}
        onReload={Getdata}



        pagination={{
          showSizeChanger: true,
          showLessItems: true,
          showTotal: total => `共 ${Total} 条`,
          total: Total,
          current: SearchParams.page,
          pageSizeOptions: ['10', '20', '50', '100']
        }}
      >
        <Table.Column title="指令ID" dataIndex="command_id" />
        <Table.Column title="指令来源" dataIndex="source" />
        <Table.Column title="下发时间" dataIndex="command_time" />
        <Table.Column title="物理区号" dataIndex="physical_zone" />
        <Table.Column title="柜号" dataIndex="locker_number" />
        <Table.Column title="锁类型" dataIndex="locker_type" />

        <Table.Column title="执行结果" dataIndex="execution_result" render={(text) => (
          <>
            {text === 1 ? "管理卡" : text == 2 ? "客户卡" : '远程开锁'}
          </>
        )} />


        {/* <Table.Column title="结果描述" dataIndex="result_message" /> */}
        <Table.Column title="收到的JSON内容" dataIndex="request_data" />
        <Table.Column title="uuid" dataIndex="uuid" />
        <Table.Column width={180} title="操作" render={info => (
          <Action>

          </Action>
        )} />
      </TableCard>
    </div>
  )
}

export default Authorization